<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
			color: white;
		}
		.box{
			margin: 0 auto;
		}
		.list{

		}
		.header{
			background-color: rgb(25, 29, 58, 1.0);
			height: 58px;
			display: flex;
			align-items: center;
			overflow: hidden;
		}
		.header-list{
			width: 880px;
			margin-left: 80px;
			display: flex;
			color: #777;
			font-size: 14px;
			align-items: center;
			overflow: hidden;
		}
		.logo{
			margin-right: 50px;
		}
		.header-list>div{
			text-align: center;
			width: 87px;
			padding: 20px;
			border-right: 1px solid #777;
			overflow: hidden;
		}
		.header-list>div:nth-of-type(1){
			border-left: 1px solid #777;
		}
		.header-list>div:hover{
			color: white;
		}
		.header>a:nth-of-type(1){
			width: 100px;
			height: 35px;
			margin-left: 20px;
/*			align-items: center;*/
			text-align: center;
			line-height: 35px;
			color: white;
			background-color:rgb(56, 183,116, 1.0);
			border-radius: 8px;
		}
		.header>a:nth-of-type(2){
			margin: 0 20px ;
			color: rgb(56, 183, 116, 1.0);
		}
		.body{
			display: flex;
			justify-content: center;
			flex-wrap:wrap ;
		}
		.back{
			width: 1680px;
			height: 254px;
			background-image: url(../博雅/01.jpg);]
			background-size: 90% 90%;
			background-position: center;
		}
		.list-header{
			width: 1000px;
			height: 29px;
			margin: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid black;
			display: flex;
			align-items: center;
		}
		.list-header>p{
			font-size: 20px;
			font-weight: bold;
			color: rgb(68, 72, 102, 1.0);
		}
		.list-header>div:nth-of-type(1){

			width: 24px;
			height: 24px;
			margin-right: 10px;
			background-image: url(../博雅/精灵图1.png);
			background-position: 1px -191px;
		}
		.list-header>div:nth-of-type(2){
			margin-left: 800px;
			width: 14px;
			height: 14px;
			background-image: url(../博雅/小房子.png);
			background-position: 0 0;
		}
		.list-header>div:nth-of-type(3){
			width: 10px;
			height: 10px;
			background-image: url(../博雅/精灵图4.png);
			background-position: 3px -149px;
		}
		.list-header>a{
			font-size: 12px;
		}
		.list-body{
			display: flex;
			justify-content: space-around;
		}
		.list-item{
			width: 300px;
			background-color: #eee;
			text-align: center;
			position: relative;
		}
		.item-one{
			margin: 0 auto;
			margin-bottom: 5px;
			width: 50px;
			height: 50px;
			background-image: url(../博雅/精灵图2.png);
			background-position: 10px -12px;
		}
		.item-two{
			margin: 0 auto;
			margin-bottom: 5px;
			width: 59px;
			height: 50px;
			background-image: url(../博雅/精灵图2.png);
			background-position: 0px -215px;
		}
		.item-thrre{
			margin: 0 auto;
			margin-bottom: 5px;
			width: 59px;
			height: 50px;
			background-image: url(../博雅/精灵图2.png);
			background-position: 3px -146px;
		}
		.list-item>p{
			text-align: center;
			font-size: 14px;
			margin-bottom: 5px;
		}
		.list-item>h1{
			text-align: center;
			font-size: 20px;
		}
		.list-item>img{
			position: absolute;
			bottom: 30px;
			right: 10px;
		}
		.list-item>a{
			font-size: 20px;
		}
		.list-item>a:hover{
			text-decoration: underline;
		}
		.body .item-p{
			margin-top: 20px;
			width: 90%;
			text-align: left;
		}
		.item{
			width: 1000px;
			margin: 0 auto;
			margin-top: 30px;
/*			margin-left: 130px;*/
			display: flex;
/*			justify-content: space-between;*/
			flex-wrap: wrap;
		}
		.item-list{
			width:330px;
			height: 140px;
			text-align: center;
			border: 1px solid #777;
		}
		.item-list-img{
			margin-top: 20px;
			margin-bottom: 10px;
			text-align: center;
		}
		.only{
			line-height: 150px;
		}
		.item-list:hover{
			background-color: ;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="header">
			<div class="header-list">
				<a href="#" class="logo">
					<img src="../博雅/logo.png">
				</a>
				<div>首页</div>
				<div><a href="./博雅游戏.html">博雅游戏</a></div>
				<div>博雅新闻</div>
				<div>关于我们</div>
				<div>客服中心</div>
				<div>投资者关系</div>
			</div>
			<a href="#">加入我们</a>
			<a href="#">中文</a>
			<a href="">EN</a>
		</div>
		<div class="body">
			<div class="back"></div>
			<div class="list">
				<div class="list-header">
					<div></div>
					<p>客服中心</p>
					<div></div>
					<div></div>
					<a href="">客服中心</a>
				</div>
				<div class="list-body">
					<div class="list-item">
						<div class="item-one"></div>
						<p>客服电话：</p>
						<h1>400-688-7026</h1>
						<h1>0755-86166169</h1>
					</div>
					<div class="list-item">
						<div class="item-two"></div>
						<p>在线客服：</p>
						<h1>在线人工服务</h1>
						<img src="../博雅/在线咨询.png">
					</div>
					<div class="list-item">
						<div class="item-thrre"></div>
						<p>客服邮箱：</p>
						<a href="">kefu@boyaa.com</a>
					</div>
				</div>
			</div>
			
			<div class="item">
				<p class="item-p">点击以下各游戏图标查看常见问题解答：</p>
				<div class="item-list">
					<div class="item-list-img">
						<img src="../博雅/02.png">
					</div>
					<p>新斗地主</p>
				</div>
				<div class="item-list">
					<div class="item-list-img">
						<img src="../博雅/03.png">
					</div>
					<p>新斗地主</p>
				</div>
				<div class="item-list">
					<div class="item-list-img">
						<img src="../博雅/04.png">
					</div>
					<p>新斗地主</p>
				</div>
				<div class="item-list">
					<div class="item-list-img">
						<img src="../博雅/05.png">
					</div>
					<p>新斗地主</p>
				</div>
				<div class="item-list">
					<p class="only">......</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>